<template>
  <div>
    <ElButton icon="Search" type="primary" @click="queryByCondition(1)"></ElButton>
    <ElButton type="success" icon="Plus" @click="open4Add()"></ElButton>
    <ElTable :data="results">
      <ElTableColumn label="code" prop="aniCode"></ElTableColumn>
      <ElTableColumn label="title" prop="title"></ElTableColumn>
      <ElTableColumn label="danjia" prop="price"></ElTableColumn>
      <ElTableColumn label="kucun" prop="quantity"></ElTableColumn>
      <ElTableColumn label="fengmian" prop="cover"></ElTableColumn>
      <ElTableColumn label="fengmianEx">
        <template #default="{ row }">
          <img
            style="object-fit: contain; width: 100px"
            :src="'http://localhost:7001/pic' + '/animation' + row.cover"
            alt="图片缺失"
          />
        </template>
      </ElTableColumn>
    </ElTable>
    <ElPagination
      background
      layout="prev, pager, next"
      :total="total"
      :page-size="queryCondition.pageSize"
      :current-page="queryCondition.pageNum"
      @current-change="queryByCondition"
    />
    <PracFiveInsert ref="insert"></PracFiveInsert>

    <ElRow>
      <template v-for="(e, i) in results" :key="i">
        <ElCol :span="8">
          <div class="area">
            <ElCard>
              <template #header>
                <div class="pic-area">
                  <img
                    style="object-fit: contain; width: 100%; height: 100%"
                    :src="'http://localhost:7001/pic' + '/animation' + e.cover"
                    alt="图片缺失"
                  />
                </div>
                <!-- <div class="card-header">
                  
                </div> -->
              </template>
              <div>{{ e.title }}</div>
              <div>{{ e.price }}</div>
            </ElCard>
            <!-- <img
              style="object-fit: contain; width: 100%"
              :src="'http://localhost:7001/pic' + '/animation' + e.cover"
              alt="图片缺失"
            /> -->
          </div>
        </ElCol>
      </template>
    </ElRow>
  </div>
</template>
<script lang="ts">
/**
 * 页面核心数据结构体说明文档
 *   aniCode: string = '';
  title: string = 'Animation';
  price: number = 0.0;
  quantity: number = 1;
  cover: string = '/xxx/some.png';
 *
 */
// import from
import PracFiveInsert from './PracFiveInsert.vue'
import { Animation, AnimationQC } from '@/entity/animation.entity'
export default defineComponent({
  name: 'PractiseFive',
  components: {
    PracFiveInsert
  },
  props: {
    sampleP: {
      type: Number,
      default: 0
    }
  },
  data() {
    return {
      sampleD: 'value',
      queryCondition: {
        titleLike: '',
        pageNum: 1,
        pageSize: 5
      } as AnimationQC,
      total: 0,
      results: [] as Array<Animation>
    }
  },
  computed: {
    /* sampleC() {
      return this.sampleD + "--";
    }, */
  },
  created() {},
  mounted() {
    this.queryByCondition(1)
  },
  methods: {
    // sampleM() {},
    async queryByCondition(pageNum?: number) {
      if (pageNum) {
        this.queryCondition.pageNum = pageNum
      }
      const res = await axios({
        method: 'post',
        url: 'http://localhost:7001/animation/query',
        data: this.queryCondition
      })
      this.total = res.data.total
      this.results = res.data.results
    },
    open4Add() {
      const insert: any = this.$refs.insert
      insert.show()
    }
  },
  watch: {
    // sampleP(n, o) {},
  }
})
</script>

<!--<style scoped>-->
<style lang="scss" scoped>
// .el-row {
//   display: flex;
//   flex-wrap: wrap;
// }
.el-col {
  border: solid 1px blanchedalmond;
}
.area {
  width: 400px;
  height: 400px;
  border: solid 1px red;
}
.pic-area {
  width: 280px;
  height: 160px;
  border: solid 1px rebeccapurple;
  margin: 0 auto;
}
// :deep(.el-card__header) {
//   display: flex;
//   justify-content: center;
// }
</style>
